<template>
  <div>
    <!--    轮播图区域-->
        
   <swiper :lunbotuList="lunbotuList" :isfull="true"></swiper>

    <!--    九宫格区域-->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/newlist">
          <img src="../../images/menu1.png" alt="">
          <div class="mui-media-body">新闻资讯</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/photolist">
          <img src="../../images/menu2.png" alt="">
          <div class="mui-media-body">图片分享</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
        <router-link to="/home/goodlist">
          <img src="../../images/menu3.png" alt="">
          <div class="mui-media-body">商品购买</div>
        </router-link>
      </a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
        <img src="../../images/menu4.png" alt="">
        <div class="mui-media-body">留言反馈</div>
      </a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
        <img src="../../images/menu5.png" alt="">
        <div class="mui-media-body">视频专区</div>
      </a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
        <img src="../../images/menu6.png" alt="">
        <div class="mui-media-body">联系我们</div>
      </a></li>
    </ul>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui'
  import swiper from "../subcomponents/Swiper.vue"

  export default {
    data() {
      return {
        lunbotuList: []
      }
    },
    created() {
      this.getlunbotu()
    },
    methods: {
      getlunbotu() {
        this.$http.get('api/getlunbo').then(result => {
          if (result.body.status === 0) {
            this.lunbotuList = result.body.message
            // Toast('获取轮播图Ok')
          } else {
            Toast('获取轮播图失败')
          }
        })
      }
    },
    components:{
      swiper
    }
  }
</script>

<style scoped lang="scss">
 

  /*图片img标签 src="[object Module]" 报错解决办法
  在webpack.config.js 配置文件中修改匹配规则 加上 options:{esModule: false} 作用是启用CommonJS模块语法
  参考博客：https://blog.csdn.net/simper_boy/article/details/103455444
  {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: [{loader:'url-loader?limit=7630&name=[hash:8]-[name].[ext]',options:{esModule: false}}]},
  */
  .mui-grid-view.mui-grid-9 {
    background-color: #fff;
    border: none;
    img{
      width: 60px;
      height: 60px;
    }
    .mui-media-body {
      font-size: 13px;
    }


  }

  .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border: none;
  }

</style>